<template>
	<div class="index">
		<!--头部-->
		<div class="header_wrap">
			<div class="h_l_wrap">
				<!--<div class="h_l_item selected">今日</div>
				<div class="h_l_item">/</div>
				<div class="h_l_item">本周</div>
				<div class="h_l_item">/</div>
				<div class="h_l_item">本月</div>
				<div class="h_l_item">/</div>
				<div class="h_l_item">季度</div>
				<div class="h_l_item">/</div>
				<div class="h_l_item">半年</div>
				<div class="h_l_item">/</div>
				<div class="h_l_item">今年</div>-->
				<div v-text="str" class="">
					
				</div>
			</div>
			<div class="h_c_wrap">
				吉海优房旅居作战平台
			</div>
			<div class="h_r_wrap">
				<!--<div class="address_selcect_wrap h_r_item flex flex_align_center">
					<select class="address_selcect">
						<option value="volvo">全国</option>
						<option value="saab">吉林省</option>
						<option value="opel">天津市</option>
					</select>
				</div>-->
				<!--<div class="h_r_item">
					您好，刘德华
				</div>
				<div class="h_r_item">
					退出
				</div>-->
			</div>
		</div>
		<Header></Header>
		<div class="content">
			<LeftContent></LeftContent>
			<CenterContent></CenterContent>
			<RightContent></RightContent>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/header'
	import LeftContent from '@/components/leftContent'
	import CenterContent from '@/components/centerContent'
	import RightContent from '@/components/rightContent'

	export default {
		components: {
			Header,
			LeftContent,
			CenterContent,
			RightContent
		},
		name: 'index',
		data() {
			return {
				str: ''
			}
		},
		created() {
			let that = this;
			setInterval(function() {
				that.timeShow();
			}, 1000)
		},
		methods: {
			timeShow() {
				let that = this;
				var date = new Date(); 
				var year = date.getFullYear(); //获取年      
				var month = date.getMonth(); //获取当前月份(0-11,0代表1月)
				month+=1;
				         
				var day = date.getDate();  //获取当前日(1-31)   
				             
				var hour = date.getHours();                /*09:04 比9:4更加规范*/      
				
				     
				if(hour < 10) {                   
					hour = "0" + hour;               
				}               
				var minute = date.getMinutes();               
				if(minute < 10) {                   
					minute = "0" + minute;               
				}               
				var second = date.getSeconds();               
				if(second < 10) {                   
					second = "0" + second;               
				}               
				that.str = year+ "/" + month + "/" + day + "   " + hour + ":" + minute + ":" + second;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.index {
		width: 1920px;
		/*height: 1080px;*/
		background: url("../assets/img/index_bg.png") no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		padding: 24px 42px;
		box-sizing: border-box;
	}
	
	.header_wrap {
		display: flex;
		justify-content: center;
		position: relative;
		padding-bottom: 27px;
		background: url("../assets/img/header_bg.png") no-repeat center -22px;
	}
	
	.h_c_wrap {
		font-size: 38px;
	}
	
	.h_l_wrap {
		position: absolute;
		left: 10px;
		display: flex;
		font-size: 26px;
	}
	
	.h_l_item {
		padding-right: 10px;
	}
	
	.h_l_item.selected {
		color: #2BFAFF;
	}
	
	.h_r_wrap {
		position: absolute;
		right: 10px;
		display: flex;
		align-content: center;
		font-size: 18px;
	}
	
	.h_r_item {
		margin-right: 40px;
	}
	/*公共的样式*/
	
	.flex {
		display: flex;
	}
	
	.flex_align_center {
		align-content: center;
	}
	
	.xiala_btn {
		padding: 0 8px;
	}
	
	.address_selcect_wrap {
		position: relative;
	}
	
	.address_selcect {
		background: #0A4276;
		border: none;
		color: #fff;
		font-size: 18px;
		padding-right: 70px;
		/* 清除默认的箭头样式 */
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		background: url(../assets/img/xiala_btn.png) 100px center no-repeat;
		background-size: 22px;
	}
	
	.address_selcect option {
		background: #0A4276;
		color: #fff;
	}
	
	.content {
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
	}
</style>